<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>母校行活动管理</title>
    <link rel="stylesheet" href="ZUOYE.css">
</head>
<body>
<div class="container">
    <!-- 顶部导航 -->
    <div class="navbar">
        <span class="navbar-title" id="navbarTitle">活动广场</span>
        <button class="navbar-btn" id="navbarBtn">
            <i>☰</i>
        </button>
    </div>

    <!-- 活动广场页面 -->
    <div class="page active" id="activitySquare">
        <div class="header">
            <span class="title">活动广场</span>
            <span class="recruiting-tip">2个队伍正在招募</span>
        </div>

        <div class="search-box">
            <input type="text" class="search-input" placeholder="请输入中学名称或队长姓名关键词查询" />
        </div>

        <div class="team-list">
            <div class="team-item" onclick="showTeamDetail()">
                <div class="school-badge"></div>
                <div class="team-info">
                    <span class="school-name"></span>
                    <span class="captain">队长：张明</span>
                    <span class="team-name">队伍名称：</span>
                    <span class="member-count">28人已经加入，赶紧报名吧！</span>
                </div>
                <span class="recruiting-status">招募中</span>
            </div>

            <div class="team-item" onclick="showTeamDetail()">
                <div class="school-badge"></div>
                <div class="team-info">
                    <span class="school-name"></span>
                    <span class="captain">队长：李华</span>
                    <span class="team-name">队伍名称：</span>
                    <span class="member-count">15人已经加入，赶紧报名吧！</span>
                </div>
                <span class="recruiting-status">招募中</span>
            </div>

        

    <!-- 队伍创建页面 -->
    <div class="page" id="createTeam">
        <div class="batch-info">
            <span class="batch-title">母校行活动秋季批次</span>
            <span class="batch-detail">批次学年：2025-2026学年</span>
            <span class="batch-detail">批次开始时间：2025/9/1</span>
            <span class="batch-detail">批次结束时间：2025/11/30</span>
            <button class="create-btn" onclick="showToast('开始创建队伍')">马上创建</button>
            <span class="tip">28个队伍成功组建，赶紧报名吧！</span>
        </div>

        <div class="form-item">
            <span class="label">请选择中学</span>
            <input type="text" class="input" id="schoolInput" placeholder="请选择中学" oninput="checkSubmit()" />
            <span class="note">一个中学允许存在多个队伍</span>
        </div>

        <div class="form-item">
            <span class="label">请取一个标志性队伍名称</span>
            <input type="text" class="input" id="teamNameInput" placeholder="请输入队伍名称" oninput="checkSubmit()" />
            <span class="note">队伍名称唯一</span>
        </div>

        <button class="submit-btn" id="submitBtn" disabled onclick="submitTeam()">成为队长</button>

        <div class="notes">
            <text>1、队伍名称进行重名验证、队伍名称组成为 “校名 + 自定义部分”，如 “武汉一中队”</text>
            <text>2、成功组建队伍需要过招办审批。</text>
        </div>
    </div>

    <!-- 我的队伍页面 -->
    <div class="page" id="myTeam">
        <div class="team-title">武汉一中队</div>

        <div class="member-info">
            <span class="info-label">队长信息</span>
            <div class="avatar"></div>
            <span class="name">张明</span>
            <span class="id">2020110866</span>
            <span class="college">计算机科学与技术学院</span>
            <button class="call-btn" onclick="showToast('拨打队长电话')">拨打电话</button>
        </div>

        <div class="member-list">
            <span class="info-label">队员信息</span>

            <div class="member-item">
                <div class="avatar"></div>
                <span class="name">李华</span>
                <button class="call-btn" onclick="showToast('拨打队员电话')">拨打电话</button>
            </div>

            <div class="member-item">
                <div class="avatar"></div>
                <span class="name">王芳</span>
                <button class="call-btn" onclick="showToast('拨打队员电话')">拨打电话</button>
            </div>

            <div class="member-item">
                <div class="avatar"></div>
                <span class="name">赵伟</span>
                <button class="call-btn" onclick="showToast('拨打队员电话')">拨打电话</button>
            </div>
        </div>

        <div class="photo-section">
            <span class="info-label">活动照片</span>
            <span class="status" id="photoStatus">
                    <button class="upload-btn" onclick="switchPage('uploadPhoto')">上传</button>
                </span>
            <div class="photo-placeholder" id="photoPlaceholder" style="display: none;">审核通过后可见</div>
        </div>
    </div>

    <!-- 照片上传页面 -->
    <div class="page" id="uploadPhoto">
        <span class="rule">一次性可上传5张照片进行审核</span>
        <span class="rule">活动总结最多上传10张照片</span>
        <span class="rule">审核通过的照片不可删除，请联系管理员删除</span>

        <div class="upload-photo-container">
            <button class="upload-btn-big" onclick="selectPhotos()">上传文件</button>

            <span class="note">请上传横拍照片，大小不超过10M</span>
            <span class="note">仅支持一般图片格式，如PNG、JPG</span>

            <span class="remain-tip" id="remainTip">可继续上传5张照片审核</span>

            <button class="submit-btn" id="submitPhotoBtn" disabled onclick="submitPhotos()">提交审核</button>

            <div class="photo-list" id="photoList">
                <!-- 照片会动态添加到这里 -->
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="tabbar">
        <div class="tabbar-item active" onclick="switchPage('activitySquare')">
            <i>🏠</i>
            <span>首页</span>
        </div>
        <div class="tabbar-item" onclick="switchPage('createTeam')">
            <i>➕</i>
            <span>创建</span>
        </div>
        <div class="tabbar-item" onclick="switchPage('myTeam')">
            <i>👥</i>
            <span>我的队伍</span>
        </div>
        <div class="tabbar-item" onclick="switchPage('uploadPhoto')">
            <i>📷</i>
            <span>上传</span>
        </div>
    </div>

    <!-- 提示弹窗 -->
    <div class="modal" id="toastModal">
        <div class="modal-content">
            <div class="modal-title">提示</div>
            <div class="modal-message" id="toastMessage"></div>
            <div class="modal-buttons">
                <button class="modal-btn confirm" onclick="hideToast()">确定</button>
            </div>
        </div>
    </div>
</div>

<script src="ZUOYE.js"></script>
</body>
</html>

